<template>
  <div>
    <el-form
      :rules="updaterules"
      ref="seditForm"
      :model="spojo"
      label-width="120px"
      label-position="right"
    >
      <el-form-item label="基地名称：" class="formitem" prop="bName">
        <el-input v-model="spojo.bName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="基地面积(亩)：" class="formitem" prop="bArea">
        <el-input v-model="spojo.bArea" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="基地位置：" class="formitem" prop="bPosition">
        <div id="distpicker-warpper">
          <v-distpicker
            id="select-dis"
            :province="spojo.province"
            :city="spojo.city"
            :area="spojo.area"
            @selected="onSelected"
            @province="handleProvince"
            @city="handleCity"
            @area="handleArea"
          ></v-distpicker>
        </div>
      </el-form-item>
      <el-row type="flex">
        <el-col :span="9">
          <el-form-item label="位置经度：" prop="bLongitude">
            <el-input v-model="spojo.bLongitude" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="位置维度：" prop="bLatitude">
            <el-input v-model="spojo.bLatitude" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-left: 10px;" :span="6">
          <el-button @click="openChoosePositon" icon="el-icon-map-location" type="primary">选择位置</el-button>
        </el-col>
      </el-row>
      <el-form-item label="所属公司：" class="formitem" prop="bCompanyId">
        <el-select clearable v-model="spojo.bCompanyId" filterable placeholder="请选择所属公司">
          <el-option v-for="(item,index) in cNames" :key="index" :label="item.cName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生态环境：" class="formitem">
        <el-input
          style="margin-top: 10px"
          v-model="spojo.bWaterEnvironment"
          autocomplete="off"
          rows="4"
          type="textarea"
          placeholder="请输入水环境"
        ></el-input>
        <el-input
          style="margin-top: 5px"
          v-model="spojo.bSoilEnvironment"
          autocomplete="off"
          rows="4"
          type="textarea"
          placeholder="请输入土环境"
        ></el-input>
        <el-input
          style="margin-top: 5px"
          v-model="spojo.bAirEnvironment"
          autocomplete="off"
          rows="4"
          type="textarea"
          placeholder="请输入大气环境"
        ></el-input>
      </el-form-item>
      <el-form-item label="总体评价：" class="formitem">
        <el-select clearable v-model="spojo.bTotalityAppraise" placeholder="总体评价">
          <el-option label="优" value="优"></el-option>
          <el-option label="良" value="良"></el-option>
          <el-option label="合格" value="合格"></el-option>
          <el-option label="不合格" value="不合格"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：" class="formitem">
        <el-input v-model="spojo.bRemarks" autocomplete="off" rows="4" type="textarea"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import companyApi from "@/api/company";
import productbaseApi from "@/api/productbase";
import VDistpicker from "v-distpicker";

const mnames = [
  { type: "1", name: "化橘红" },
  { type: "2", name: "沉香" },
  { type: "3", name: "阳春砂" },
  { type: "4", name: "何首乌" },
  { type: "5", name: "巴戟天" },
  { type: "6", name: "广陈皮" },
  { type: "7", name: "广佛手" },
  { type: "8", name: "广藿香" }
];
export default {
  name: "add-new",
  props: {
    addnewData: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    VDistpicker
  },
  data() {
    return {
      spojo: {
        id: "",
        bName: "",
        bArea: "",
        bCompanyId: "",
        bPosition: "",
        bProvince: "",
        bCity: "",
        // 以下的省市区用来清空
        province: "",
        city: "",
        area: "",
        bRegion: "",
        bLatitude: "",
        bLongitude: "",
        bRemarks: "",
        bWaterEnvironment: "",
        bSoilEnvironment: "",
        bAirEnvironment: "",
        bTotalityAppraise: "",
        bEnvironmentDataImgPath: ""
      },
      ischange: null,
      // 省市区
      mnames,
      cNames: [],
      updaterules: {
        // 校验规则
        bName: [
          { required: true, message: "基地名称不能为空", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.selectcName();
  },

  mounted() {
    this.cancelFieldValidate("seditForm");
  },

  watch: {
    isEdit: {
      immediate: true,
      handler(val) {
        this.ischange = val;
      }
    },
    addnewData: {
      immediate: true,
      handler(val) {
        this.spojo = val;
      }
    }
  },

  methods: {
    // 获取省市区的值
    handleProvince(data) {
      // 修改选中文字颜色
      // document.getElementById('distpicker-warpper').getElementsByTagName('select')[0].style.color = '#606266';
      document.getElementById("select-dis").firstChild.style.color = "#606266";
      // 赋值给变量
      this.spojo.bProvince = data.value.slice(0, data.value.length - 1);
      this.spojo.province = data.value;
      if (this.spojo.bProvince == "省") {
        this.spojo.bProvince = "";
      }
      console.log("省：" + this.spojo.bProvince);
    },
    handleCity(data) {
      // 修改选中文字颜色
      document
        .getElementById("select-dis")
        .getElementsByTagName("select")[1].style.color = "#606266";
      // 赋值给变量
      this.spojo.bCity = data.value.slice(0, data.value.length - 1);
      this.spojo.city = data.value;
      if (this.spojo.bCity == "市") {
        this.spojo.bCity = "";
      }
      console.log("市：" + this.spojo.bCity);
    },
    handleArea(data) {
      // 修改选中文字颜色
      document
        .getElementById("select-dis")
        .getElementsByTagName("select")[2].style.color = "#606266";
      // 赋值给变量
      this.spojo.bRegion = data.value.slice(0, data.value.length - 1);
      this.spojo.area = data.value;
      if (this.spojo.bRegion == "区") {
        this.spojo.bRegion = "";
      }
      console.log("区：" + this.spojo.bRegion);
    },
    onSelected(data) {
      if (data.province.code == undefined) {
        data.province.value = "";
      }
      if (data.city.code == undefined) {
        data.city.value = "";
      }
      if (data.area.code == undefined) {
        data.area.value = "";
      }
      // alert(data.province.value + ' | ' + data.city.value + ' | ' + data.area.value);
      console.log(
        data.province.value + " | " + data.city.value + " | " + data.area.value
      );
      console.log(data);
    },
    openChoosePositon(data) {
      this.$emit("fopenChoosePositon");
    },
    // 查询公司名称列表
    selectcName() {
      companyApi.selectcName().then(resp => {
        this.cNames = resp.data.rows;
      });
    },
    // 清空校验
    cancelFieldValidate(formName) {
      this.$refs[formName].clearValidate();
    },
    // 校验表单
    validateForm() {
      this.$refs["seditForm"].validate(valid => {
        if (valid) {
          if(this.ischange) {
            productbaseApi.productBaseUpdate(this.spojo).then(resp => {
              if (resp.data.flag) {
                //修改成功
                this.$message({
                  message: "修改产地产区信息成功",
                  type: "success"
                });
                // 关闭
                this.$emit("close");
                // 调用父组件的查询方法，刷新数据
                this.$emit("fselect");
              } else {
                // 失败
                this.$message({
                  message: "修改产地产区信息失败",
                  type: "warning"
                });
              }
            });
          } else {
            productbaseApi.productBaseInsert(this.spojo).then(resp => {
              if (resp.data.flag) {
                //新增成功
                this.$message({
                  message: "新增产地产区信息成功",
                  type: "success"
                });
                // 关闭
                this.$emit("close");
                // 调用父组件的查询方法，刷新数据
                this.$emit("fselect");
              } else {
                // 失败
                this.$message({
                  message: "新增产地产区信息失败",
                  type: "warning"
                });
              }
            });
          }
        } else {
          this.$message({
            message: "提交表单失败",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>